<?php require_once(HResponse::path() . 'common/header.html'); ?>
<link href="<?php echo HResponse::uri(); ?>css/inner.css?3=4" rel="stylesheet" type="text/css" media='all' />
<script type="text/javascript" src="<?php echo HResponse::uri(); ?>common/select_p.js?3=15"></script>
<script type="text/javascript" src="<?php echo HResponse::uri(); ?>common/scroll.js?3=10"></script>
</head>
<body>
<?php require_once(HResponse::path() . 'common/top.html'); ?>
<div id="bannerabout">
    <?php if(I('parent_id')==810){ ?>
    <h2>EYEGLASSES</h2>
    <img src="<?php echo HResponse::uri(); ?>/images/products.jpg" />
    <?php } else { ?>
    <h2>SUNGLASSES</h2>
    <img src="<?php echo HResponse::uri(); ?>/images/products1.jpg" />
    <?php } ?>
</div>
<div class="wrapper clearfix">
    <div id="m_right"><div class="Prod_rt">
    <div class="sidebar">
        <?php $cateRec = HResponse::getAttribute('cate_record'); ?>
    	<div class="sidebar_Title"><?php echo $cateRec['name']; ?></div>
        <div class="sidebarDivider"></div>
        <div class="s_column">
            <?php $sonList = HResponse::getAttribute('sonlist'); ?>
            <?php foreach($sonList as $item) { ?>
        	<a href="javascript:void(0);" data-id="<?php echo $item['id']; ?>" class="cate lm-item clearance">
                <?php echo $item['name']; ?>
            </a>
            <?php } ?>
        </div>
        <div class="sidebar_Title sidebar_Collapse">Color<div class="sid_icon"></div></div>
        <div class="Collapse_ma">
            <?php $colorList = HResponse::getAttribute('color_list'); ?>
            <?php foreach($colorList as $key => $item){ ?>
        	<div class="ColorBox"><input type="checkbox" id="che<?php echo $key + 1; ?>" />
                <?php if ($item['content']) { ?>
                <label data-name="<?php echo $item['name']; ?>"  data-id="<?php echo $item['id']; ?>" class="colorCircle" style="background:#<?php echo $item['content']; ?>"></label>
                <?php } else { ?>
                <label data-name="<?php echo $item['name']; ?>" data-id="<?php echo $item['id']; ?>" class="colorCircle" style="background:url(<?php echo HResponse::touri($item['image_path']); ?>) center center; background-size: 100% 100%;"></label>
                <?php } ?>
                <div class="ColorBox_tlor"><?php echo $item['name']; ?><div class="tooltip-arrow"></div></div></div>
            <?php } ?>
            <div class="clear"></div>
        </div>
        <div class="sidebarDivider sidebarDivider_Coll"></div>
        <div class="sidebar_Title sidebar_Collapse">Shape<div class="sid_icon"></div></div>
        <div class="filters_ma">
            <?php $shapeList = HResponse::getAttribute('shape_list'); ?>
            <?php foreach($shapeList as $key => $item){ ?>
            <div class="filtersDefault <?php if(in_array($item['id'], explode(',', I('shape')))) { ?>filt_on<?php } ?>">
            <input type="checkbox" id="khe<?php echo $key + 1; ?>" class="shape-checkbox" value="<?php echo $item['id']; ?>"
                <?php if(in_array($item['id'], explode(',', I('shape')))) { ?>checked<?php } ?>/>
            <div class="fram_img fram_<?php echo $key + 1; ?>"></div>
            <label for="khe<?php echo $key + 1; ?>"><?php echo $item['name']; ?></label><span>(<?php echo $item['content']; ?>)</span>
            </div>
            <?php } ?>
        </div>
        <div class="sidebarDivider sidebarDivider_Coll"></div>
    <div class="sidebar_Title sidebar_Collapse">Rim<div class="sid_icon"></div></div>
    <div class="filters_ma">
        <?php $rimList = HResponse::getAttribute('rim_list'); ?>
        <?php foreach($rimList as $key => $item){ ?>
    	<div class="filtersDefault <?php if(in_array($item['id'], explode(',', I('rim')))) { ?>filt_on<?php } ?>">
            <input type="checkbox" id="fhe<?php echo $key + 1; ?>" class="rim-checkbox" value="<?php echo $item['id']; ?>"
            <?php if(in_array($item['id'], explode(',', I('rim')))) { ?>checked<?php } ?>/>
            <label for="fhe<?php echo $key + 1; ?>"><?php echo $item['name']; ?></label>
            <span>(<?php echo $item['content']; ?>)</span>
        </div>
        <?php } ?>
    </div>
    </div>
    <form id="tag-list-form" class="content_p" action="<?php echo HResponse::url('cate', 'parent_id=' . I('parent_id')); ?>" method="get">
    	<div class="header_p">Acetate Frame</div>
        <input name="cate" value="<?php echo I('cate'); ?>" type="hidden" id="tag-item-cate"/>
        <input name="parent_id" value="<?php echo I('parent_id'); ?>" type="hidden"/>
        <input name="color" value="<?php echo I('color'); ?>" type="hidden" id="tag-item-color"/>
        <input name="shape" value="<?php echo I('shape'); ?>" type="hidden" id="tag-item-shape"/>
        <input name="rim" value="<?php echo I('rim'); ?>" type="hidden" id="tag-item-rim"/>
        <input name="mater" value="<?php echo I('mater'); ?>" type="hidden" id="tag-item-mater"/>
        <div class="sidebarDivider sidebarDivider_Coll"></div>
        <?php $colorTagList =  HResponse::getAttribute('color_tag_list'); ?>
        <?php $shapeTagList =  HResponse::getAttribute('shape_tag_list'); ?>
        <?php $rimTagList   =  HResponse::getAttribute('rim_tag_list'); ?>
        <?php $materTagList =  HResponse::getAttribute('mater_tag_list'); ?>
        <div class="filterList_wrap">
            <?php foreach($colorTagList as $item) { ?>
        	<div class="ListDefa_item" data-tag="color" data-id="<?php echo $item['id']; ?>">
                <span class="ListDefa_name"><?php echo $item['name']; ?></span>
            </div>
            <?php } ?>
            <?php foreach($shapeTagList as $item) { ?>
            <div class="ListDefa_item" data-tag="shape" data-id="<?php echo $item['id']; ?>">
                <span class="ListDefa_name"><?php echo $item['name']; ?></span>
            </div>
            <?php } ?>
            <?php foreach($rimTagList as $item) { ?>
            <div class="ListDefa_item" data-tag="rim" data-id="<?php echo $item['id']; ?>">
                <span class="ListDefa_name"><?php echo $item['name']; ?></span>
            </div>
            <?php } ?>
            <?php foreach($materTagList as $item) { ?>
            <div class="ListDefa_item" data-tag="mater" data-id="<?php echo $item['id']; ?>">
                <span class="ListDefa_name"><?php echo $item['name']; ?></span>
            </div>
            <?php } ?>
        </div>
        <div class="nm_pro_hj">
            <div class="nm_pro_list">
                <div class="clear"></div>
            </div>
        </div>
    	<div class="clear"></div>
    </form>
    <div class="clear"></div>
    </div>
    <div class="clear"></div>
    </div>
    <div class="clear"></div>
</div>
<script>
    var page = 1;
    Array.prototype.remove = function(val) {
        var index = this.indexOf(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };
</script>
<script>
    var newid    = "<?php echo I('is_new') ?: 1; ?>";
    var keyword  = "<?php echo I('keyword') ?: ''; ?>";
    var parentId = "<?php echo I('parent_id'); ?>";
    var color    = "<?php echo I('color'); ?>";
    var shape    = "<?php echo I('shape'); ?>";
    var rim      = "<?php echo I('rim'); ?>";
    var mater    = "<?php echo I('mater'); ?>";
    var cate    = "<?php echo I('cate'); ?>";

    $(".colorCircle").mouseover(function(){
        $(this).next().toggle();
    });

    $(".colorCircle").mouseout(function(){
        $(this).next().toggle();
    });

    // click cate
    $('.cate').on('click', function() {
        $('.header_p').html($(this).html());
        $('#tag-item-cate').val($(this).attr('data-id'));
        $('#tag-list-form').submit();
    });

    // click color
    $('.colorCircle').on('click', function() {
        var name = $(this).attr('data-name');
        var id   = $(this).attr('data-id');
        var color= $('#tag-item-color').val();
        var html = '<div class="ListDefa_item color-tag" data-id="' + id + '"><span class="ListDefa_name">' + name + '</span></div>';
        color    = color == '' ? id : color + ',' + id;
        $('#tag-item-color').val(color);
        $('.filterList_wrap').append(html);
        $('#tag-list-form').submit();
    });

    //click shape
    $('.shape-checkbox').on('click', function() {
        var shapeId = $(this).val();
        if ($(this).is(':checked')) {
            var shape = $('#tag-item-shape').val();
            shape    = shape == '' ? shapeId : shape + ',' + shapeId;
            $('#tag-item-shape').val(shape);
        } else {
            var data = $('#tag-item-shape').val();
            data     = data.split(',');
            data.remove(shapeId);
            $('#tag-item-shape').val(data);
        }
        $('#tag-list-form').submit();
    });

    //click rim
    $('.rim-checkbox').on('click', function() {
        var rimId = $(this).val();
        if ($(this).is(':checked')) {
            var rim = $('#tag-item-rim').val();
            rim    = rim == '' ? rimId : rim + ',' + rimId;
            $('#tag-item-rim').val(rim);
        } else {
            var data = $('#tag-item-rim').val();
            data     = data.split(',');
            data.remove(rimId);
            $('#tag-item-rim').val(data);
        }
        $('#tag-list-form').submit();
    });

    //click mater
    $('.mater-checkbox').on('click', function() {
        var materId = $(this).val();
        if ($(this).is(':checked')) {
            var mater = $('#tag-item-mater').val();
            mater    = mater == '' ? materId : mater + ',' + materId;
            $('#tag-item-mater').val(mater);
        } else {
            var data = $('#tag-item-mater').val();
            data     = data.split(',');
            data.remove(materId);
            $('#tag-item-mater').val(data);
        }
        $('#tag-list-form').submit();
    });

    $('.ListDefa_item').on('click', function() {
        var tag  = $(this).attr('data-tag');
        var data = $('#tag-item-' + tag).val();
        data     = data.split(',');
        var id   = $(this).attr('data-id');
        data.remove(id);
        $('#tag-item-' + tag).val(data);
        $('#tag-list-form').submit();
    });
</script>
<script>
    $(function(){
        $(".sidebar_Collapse").on("click",function(){
            $(this).next().slideToggle();
            $(this).children(".sid_icon").toggleClass("curr");
        })
    })
</script>
<?php require_once(HResponse::path() . 'common/footer.html'); ?>
</body>
</html>
